<template>
  <div>

    <div class="company-hotjob">
      <div class="inner home-inner">
        <h3>
          <router-link to="/cydetail" class="more"
            >查看全部660个职位</router-link
          >热招职位
        </h3>
        <ul>
          <li>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">15-30K·14薪</span>
                  <b>PHP开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
          </li>
          <li>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">20-40K</span>
                  <b>iOS</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
          </li>
          <li>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">25-35K·14薪</span>
                  <b>高级大数据开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="job-box">
      <div class="job-content">
        <div class="job-company">
          <div class="company-intro">
            <h3>{{ obj.data.name }}介绍</h3>
            <span>公司简介</span>
            <div class="text">
              {{
                `${obj.data.name}创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商，我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界：让无处不在的联接，成为人人平等的权利；为世界提供最强算力，让云无处不在，让智能无所不及；所有的行业和组织，因强大的数字平台而变得敏捷、高效、生机勃勃；通过AI重新定义体验，让消费者在家居、办公、出行等全场景获得极致的个性化体验。目前华为约有19.4万员工，业务遍及170多个国家和地区，服务30多亿人口。`
              }}
            </div>
          </div>
          <div class="company-intro">
            <h3>{{ obj.data.name }}介绍</h3>
            <span>公司简介</span>
            <div class="text">
              {{
                `${obj.data.name}创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商，我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界：让无处不在的联接，成为人人平等的权利；为世界提供最强算力，让云无处不在，让智能无所不及；所有的行业和组织，因强大的数字平台而变得敏捷、高效、生机勃勃；通过AI重新定义体验，让消费者在家居、办公、出行等全场景获得极致的个性化体验。目前华为约有19.4万员工，业务遍及170多个国家和地区，服务30多亿人口。`
              }}
            </div>
          </div>
          <div class="company-intro">
            <h3>工商信息介绍</h3>
            <span>{{ obj.data.name }}</span>
            <ul class="dropdown">
              <li>
                <span class="t">法定代表人：{{ obj.data.operName }}</span>
              </li>
              <li>
                <span class="t">注册资本：{{ obj.data.registCapi }}</span>
              </li>
              <li>
                <span class="t right"
                  >成立日期：{{ obj.data.foundingTime }}</span
                >
              </li>
              <li @click="dropopen($event)" id="open" v-show="flag">展开</li>
              <li @click="dropopen1($event)" id="open" v-show="!flag">收起</li>
              <li class="col-auto">
                <span class="t">企业类型：{{ obj.data.econKind }}</span>
              </li>
              <li class="col-auto">
                <span class="t">经营状态：{{ obj.data.managementForms }}</span>
              </li>
              <li class="col-auto">
                <span class="t">注册地址：{{ obj.data.address }}</span>
              </li>
              <li class="col-auto">
                <span class="t"
                  >统一社会信用代码：{{ obj.data.creditCode }}</span
                >
              </li>
              <li class="col-auto">
                <span class="t">{{ obj.data.scope }}</span>
              </li>
            </ul>
          </div>
          <div class="company-intro">
            <h3>公司地址</h3>
            <img
              src="https://img.bosszhipin.com/beijin/amap/staticMap/5a64f42a54e61fd80b15790024c11f48"
              alt="公司地址"
            />
          </div>
          <div class="company-intro findjob">
            <h3>在招职位</h3>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">25-35K·14薪</span>
                  <b>高级大数据开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">25-35K·14薪</span>
                  <b>高级大数据开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">25-35K·14薪</span>
                  <b>高级大数据开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">25-35K·14薪</span>
                  <b>高级大数据开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">25-35K·14薪</span>
                  <b>高级大数据开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">25-35K·14薪</span>
                  <b>高级大数据开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">25-35K·14薪</span>
                  <b>高级大数据开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">25-35K·14薪</span>
                  <b>高级大数据开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
            <router-link to="/position">
              <div class="info-primary">
                <div class="name">
                  <span class="salary">25-35K·14薪</span>
                  <b>高级大数据开发工程师</b>
                </div>
                <p class="gray">1-3年·本科·北京</p>
              </div>
            </router-link>
          </div>
        </div>
        <div class="aside-info">
          <div class="sign-wrap sign-wrap-v2">
            <div class="sign-form sign-quick" style="display: block">
              <canvas id="sign-side" width="250" height="50"></canvas>
              <h3 class="title">各大行业职位任你选</h3>
              <form
                action="/wapi/zppassport/login/phone"
                method="post"
                ka="sup_g_right_done"
              >
                <input type="hidden" name="pk" value="cpc_company_intro" />
                <div class="form-btn">
                  <button type="submit" class="btn" ka="sup_g_right">
                    登录/注册
                  </button>
                </div>
                <div class="form-btn">
                  <button type="submit" class="btn" ka="sup_g_right">
                    登录/注册
                  </button>
                </div>
                <div class="form-btn">
                  <button type="submit" class="btn" ka="sup_g_right">
                    登录/注册
                  </button>
                </div>

                <div class="policy">
                  <input type="checkbox" class="agree-policy" name="policy" />
                  <a>同意BOSS直聘《用户协议》《隐私政策》</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <my-footer></my-footer>
  </div>
</template>
<script>
import myfooter from "@/components/footer.vue";
import {getcybsinfo} from "@/api"
export default {
  name: "cyintro",
  data() {
    return {
      msg: "公司简介",
      list: [],
      title: "",
      obj: {},
      flag: true,
    };
  },
  components: {
    "my-footer": myfooter
  },
  created() {
    this.title = this.$route.params.title;
    getcybsinfo().then((res) => {
      this.list = res.data.data;
      this.list.forEach((val) => {
        if (val.title === this.$route.params.title) {
          this.obj = val;
        }
      });

      console.log(this.obj);
      console.log(res.data.data);
    });
  },
  methods: {
    dropopen(event) {
      this.flag = false;
      event.target.parentNode.style.height = "550px";
    },
    dropopen1(event) {
      this.flag = true;
      event.target.parentNode.style.height = "50px";
    },
  },
};
</script>
<style lang="less" scoped>
.job-box {
  background: #fff;
  .job-content {
    width: 1184px;
    margin: 0 auto;
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;

    .job-company {
      .findjob {
        .info-primary {
          overflow: visible;
          padding: 10px;
          border-bottom: 1px solid #ccc;
          .name {
            padding-bottom: 10px;
            .salary {
              color: #fc703e;
              float: right;

              font-size: 16px;
            }
            b {
              font-weight: 400;
              font-size: 16px;
              display: block;
              max-width: 226px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              &:hover {
                color: #5dd5c8;
              }
            }
          }
          .gray {
            color: #9fa3af;
          }
          p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .gray {
            color: #9fa3b0;
          }
        }
      }
      .dropdown {
        height: 50px;
        overflow: hidden;
        border: 1px solid #ccc;
        padding: 10px;
        position: relative;
        #open {
          position: absolute;
          width: 50px;
          right: 5px;
        }
      }
      width: 700px;
      font-size: 14px;
      img {
        width: 100%;
        vertical-align: top;
        border: none;
      }

      ul {
        font-size: 12px;
        color: #414a60;

        li {
          list-style: none;
          display: inline-block;
          vertical-align: top;
          width: 220px;
          font-size: 14px;
          padding: 10px 0;
        }
        .t {
          color: #9fa3b0;
          padding-right: 0;
        }
        li.col-auto {
          width: auto;
          display: block;
        }
      }
      h3 {
        font-weight: 700;
        font-size: 15px;
        color: #424a5e;
        line-height: 50px;
        padding: 0 0 10px 0;
        margin-bottom: 0;
        background: url(https://static.zhipin.com/zhipin-geek/v538/web/geek/images/line-sec.png)
          0 45px no-repeat;
      }
      span {
        display: block;
        font-size: 15px;
        font-weight: 500;
        color: #414a60;
        line-height: 21px;
        margin-bottom: 10px;
      }
      .text {
        color: #51586d;
        line-height: 36px;
      }
    }

    .aside-info {
      width: 360px;
      margin-left: auto;
      .sign-wrap {
        position: static;
        top: unset;
        left: unset;
        width: auto;
        min-height: 0;
        margin: 0 0 15px;
        .policy {
          padding: 10px 0;
          font-size: 12px;
          a {
            color: #fff;
            opacity: 0.7;
            display: inline-block;
            margin: 6px;
            input.agree-policy {
              vertical-align: top;
              border: 0;
            }
          }
        }
        .sign-form {
          width: auto;
          height: auto;
          background-color: #5dd5c8;
          box-shadow: none;
          border-radius: 0;
          padding: 0;
          #sign-side {
            position: absolute;
            bottom: 0;
            right: 0;
          }
          .title {
            display: block;
            padding: 20px 0 24px;
            color: #fff;
            font-size: 18px;
            line-height: 32px;
            text-align: center;
          }
          form {
            width: 258px;
            margin: 0 auto;
            .tip-error-form {
              top: 87px;
              left: 20px;
              position: static;
              height: auto;
              margin-top: -18px;
            }
            .tip-error {
              background-position: 0 -1114px;
              color: #ffeb9e;
            }
            .form-row {
              position: relative;
              margin: 0 0 24px;
            }
            .btn {
              background-color: #fff;
              color: #00c2b3;
              width: 100%;
              font-size: 16px;
              height: 42px;
              line-height: 42px;
              border: none;
              cursor: pointer;
              margin: 10px 0;
            }
          }
        }
      }
    }
  }
}
* {
  padding: 0;
  margin: 0;
}
li,
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #414a60;
}
.company-hotjob {
  background: #f2f2f5;
  padding: 25px 0 18px;
  overflow: hidden;
  .more {
    float: right;
    font-size: 14px;
    color: #9fa3b0;
    background-position: right -1581px;
    padding-right: 28px;
    margin-right: -10px;
    font-weight: 400;
  }
  .inner {
    width: 1184px;
  }
  .home-inner {
    max-width: 1184px;
    margin: 0 auto;
  }
  h3 {
    font-weight: 400;
    font-size: 16px;
    padding-bottom: 20px;
    color: black;
  }
  ul {
    font-size: 0;
    white-space: nowrap;
    li {
      display: inline-block;
      font-size: 14px;
      margin-right: 15px;
      a {
        display: block;
        width: 300px;
        padding: 19px 20px 17px;
        border: 1px #fff solid;
        background: #fff;
        .info-primary {
          overflow: visible;
          .name {
            padding-bottom: 10px;
            .salary {
              color: #fc703e;
              float: right;
              font-size: 16px;
            }
            b {
              font-weight: 400;
              font-size: 16px;
              display: block;
              max-width: 226px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              &:hover {
                color: #5dd5c8;
              }
            }
          }
          .gray {
            color: #9fa3af;
          }
          p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .gray {
            color: #9fa3b0;
          }
        }
      }
    }
  }
}
</style>